import React from 'react'
import { Link, useHistory } from 'react-router-dom'
import { useSelector } from 'react-redux'
import './index.scss'

const Header = (props) => {

    const { userInfo } = useSelector(state => state);

    const history = useHistory()

    const goBack = () => { history.go(-1) }

    return <header
        className="component_header"
    >
        {props.logo}
        {props.search}
        {
            props.goBack && <section className="component_header_back" onClick={goBack} >
                <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polyline points="12,18 4,9 12,0"
                        style={{
                            fill: 'none',
                            stroke: 'rgb(255,255,255)',
                            strokeWidth: 2
                        }}
                    />
                </svg>
            </section>
        }
        {
            props.signinUp && <Link className="component_header_user" to={`${userInfo ? '/profile' : '/login'}`}>
                {
                    userInfo ? <svg className="component_header_avatar">
                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#user"></use>
                    </svg> : <span className="component_header_login">登录|注册</span>
                }
            </Link>
        }
        {
            props.title && <section className="component_header_title ellipsis">
                <span className="component_header_title_text">{props.title}</span>
            </section>
        }
        {props.edit}
        {props.msiteTitle}
        {props.changeCity}
        {props.changeLogin}
    </header>
}

export default Header